<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="单词浏览">
    <meta name="keywords" content="单词浏览,单词浏览">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>单词浏览</title>
    <link rel="stylesheet" crossorigin="anonymous"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <link rel="stylesheet" crossorigin="anonymous"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
    <style>
        .glassbga {
            /*渐变*/
            background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
            ;
            border-radius: 1rem;
            box-shadow: 6px 6px 10px rgba(112, 112, 112, 0.2);
        }

        .glassbg {
            /*背景*/
            background: linear-gradient(to right top, #65dfc9, #6cdbeb);
            border-radius: 1rem;
        }

        .center {
            position: absolute;
            left: 50%;
            top: 10%;
            transform: translate(-50%, -50%);
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<!--
     swiper 展示
-->

<body id="q-app" class="glassbg text-white  ">
    <!---设置-->
    <div class="  d-none  d-sm-flex   fixed-top justify-content-end ">
        <span @click="pd.shwoChange=!pd.shwoChange " class="btn "
            style="font-size:32px;  filter: grayscale(100%); ">⚙</span>
    </div>



    <!--  修改 --->



    <!---上面的结果框val--->
    <div v-cloak class="container ">
        <div class="mt-2 row justify-content-center  ">
            <div class="w-100 mb-5   d-none d-md-block"><!---高度垫子 小设备隐藏--></div>
            <div>
                <h3>生成与检查</h3>
            </div>

        </div>
    </div>
    <!--卡片-->
    <div v-cloak class=" container-md   glassbga  pt-5  pb-5">
        <div class=" row   align-items-center   justify-content-around   ">

            <img v-bind:src="pd.row.img" style="max-width:100%;overflow:hidden;" class="img-fluid" alt="...">

        </div>
        <div class=" row   align-items-center   justify-content-center" style="height: 80px;">

            <button @click="er.emit('播放',0) "
                class="btn mx-5   w-25 shadow align-middle badge-secondary badge   badge-pill">
                <h3> {{pd.row.zh || 中文}} </h3>
            </button>
            <button @click="er.emit('播放',1) " class="btn mx-5 w-25    shadow   badge-info badge   badge-pill">
                <h3>{{pd.row.en || 英文}} </h3>
            </button>
        </div>
        <!---nan-->
        <div class=" d-flex    align-items-center  justify-content-center " style="height: 80px;">

            <span class="  mx-4   shadow   badge-info   badge badge-pill">
                <audio controls="controls" v-bind:src="pd.row.zh4m">
                    Your browser does not support the audio element.
                </audio>
            </span>
            <span class="   mx-4    shadow   badge-info badge   badge-pill">
                <audio controls="controls" v-bind:src="pd.row.en4m">
                    Your browser does not support the audio element.
                </audio>
            </span>
        </div>
        <!---选择声音-->
        <div v-cloak class=" d-flex     align-items-center  justify-content-around ">

            <div class="    d-flex col-md-5 col-sm-4     ">
                <!--- s4zh4m--->
                <select @change="er.emit('更新' ) " class="form-select w-100   " v-model="pd.row.s4zh4m"
                    aria-label="multiple">
                    <option v-for=" op  in  pd.opMzh " :value="op.ShortName">{{op.LocalName}} （{{op.ShortName}}）
                    </option>
                </select>

                <span @click=" er.emit ('生成.发音',{'name':pd.row.s4zh4m,'gender':'m','lang':'zh'})" v-if="pd.row.s4zh4m"
                    class=" btn " style="font-size:22px;    ">✔</span>

            </div>

            <div class="    d-flex col-md-5 col-sm-4     ">
                <!--- s4en4m--->
                <select @change="er.emit('更新' ) " class="form-select w-100   " v-model="pd.row.s4en4m"
                    aria-label="multiple">
                    <option v-for=" op  in  pd.opMen " :value="op.ShortName">{{op.LocalName}} （{{op.ShortName}}）
                    </option>
                </select>

                <span @click=" er.emit ('生成.发音',{'name':pd.row.s4en4m,'gender':'m','lang':'en'})" v-if="pd.row.s4en4m"
                    class=" btn " style="font-size:22px;    ">✔</span>

            </div>


        </div>
        <!---nv-->
        <div v-cloak class=" d-flex     align-items-center  justify-content-center " style="height: 80px;">
            <span class="  mx-4  shadow    badge badge-light badge-pill">
                <audio controls="controls" v-bind:src="pd.row.zh4f">
                    Your browser does not support the audio element.
                </audio>
            </span>
            <span class="  mx-4  shadow    badge-light badge   badge-pill">
                <audio controls="controls" v-bind:src="pd.row.en4f">
                    Your browser does not support the audio element.
                </audio>
            </span>
        </div>
        <!---选择女声音-->
        <div v-cloak class=" d-flex     align-items-center  justify-content-around ">
            <div class="    d-flex col-md-5 col-sm-4     ">
                <!--- 快选s4zh4f--->
                <select @change="er.emit('更新' ) " class="form-select w-100   " v-model="pd.row.s4zh4f"
                    aria-label="multiple">
                    <option v-for=" op  in  pd.opFzh " :value="op.ShortName">{{op.LocalName}} （{{op.ShortName}}）
                    </option>
                </select>
                <span @click=" er.emit ('生成.发音',{'name':pd.row.s4zh4f,'gender':'f','lang':'zh'})" v-if="pd.row.s4zh4f"
                    class=" btn " style="font-size:22px;    ">✔</span>
            </div>


            <div class="    d-flex col-md-5 col-sm-4     ">
                <!--- 快选s4en4f--->
                <select @change="er.emit('更新' ) " class="form-select w-100   " v-model="pd.row.s4en4f"
                    aria-label="multiple">
                    <option v-for=" op  in  pd.opFen " :value="op.ShortName">{{op.LocalName}} （{{op.ShortName}}）
                    </option>
                </select>
                <span @click=" er.emit ('生成.发音',{'name':pd.row.s4en4f,'gender':'f','lang':'en'})" v-if="pd.row.s4en4f"
                    class=" btn " style="font-size:22px;    ">✔</span>
            </div>


        </div>

    </div>

    <!---更新-->
    <transition v-cloak enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
        <div class="container-md    glassbga  mt-4  mb-4   pt-3  pb-3">
            <div class=" row  align-items-center  justify-items-around justify-content-around  ">
                <div class="   d-flex col-md-3 col-sm-3   ">
                    <label class="text-dark   d-flex  m-1 w-25 align-items-center  ">音标</label>
                    <input type="text" v-model="pd.row.ph" class="w-75 p-1 m-1 form-control">
                </div>
                <div v-if="0" class="   d-flex col-md-2 col-sm-2   ">


                    <div class="dropdown ">
                        <button type="button" class="btn btn-primary dropdown-toggle p-1 m-1" data-toggle="dropdown">
                            {{pd.mknew.lang}}
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" @click='er.emit("修改",{"lang":"中","langCode":"zh-CN"}) '
                                href="#">中</a>
                            <a class="dropdown-item" @click='er.emit("修改",{"lang":"英","langCode":"en-US"}) '
                                href="#">英</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button type="button" class="btn btn-primary dropdown-toggle p-1 m-1" data-toggle="dropdown">
                            {{pd.mknew.gender}}
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" @click='er.emit("修改",{"gender":"男","genderCode":"Male"}) '
                                href="#">男</a>
                            <a class="dropdown-item" @click='er.emit("修改",{"gender":"女","genderCode":"Female"}) '
                                href="#">女</a>
                        </div>
                    </div>
                </div>
                <div>
                    <button @click="er.emit('获取音标' ) " class="btn shadow-lg btn-danger">获取音标</button>
                </div>

                <div>
                    <button @click="er.emit('更新' ) " class="btn shadow-lg btn-danger">更新</button>
                </div>

                <div>
                    <button @click="er.emit('生成.图片' ) " class="btn shadow-lg btn-info">生图</button>
                </div>
            </div>


        </div>

    </transition>

    <!---齿轮设置-->
    <transition v-cloak enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
        <div v-if="pd.shwoChange==0?false:true" class="container-md     glassbga  mt-4  mb-4   pt-3  pb-3">
            <div class=" row  align-items-center   justify-content-around  ">
                <div class="  p-0 m-0 d-flex  col-md-1 col-sm-1  justify-content-end  ">
                    <label class="text-dark    mt-1       ">数据表</label>
                </div>
                <div class="  p-0 m-0    col-md-2 col-sm-2   align-items-center  justify-content-start ">
                    <input type="text" v-model="pd.defTable" class="  form-control">
                </div>
                <div class="  p-0 m-0  d-flex  col-md-1 col-sm-1   align-items-center  justify-content-end">
                    <label class="text-dark  mt-1  d-flex  align-content-center  ">来源</label>
                </div>
                <div class="   p-0 m-0 col-md-2 col-sm-2   d-flex  align-items-center  justify-content-start  ">
                    <input type="text" v-model="pd.defFrom" class="    form-control">
                </div>
                <div class="   p-0 m-0   col-md-1 col-sm-1    justify-content-end  ">
                    <label class="text-dark  mt-1    ">首目录</label>
                </div>
                <div class="   p-0 m-0  col-md-2 col-sm-2   align-items-center  justify-content-start  ">
                    <input type="text" v-model="pd.defPath" class="    form-control">
                </div>

                <div class="   d-flex col-auto   justify-content-start  ">
                    <button @click="er.emit('设置' ) " class="btn shadow-lg btn-danger">设置</button>
                </div>


            </div>


        </div>

    </transition>

    <div class="  d-flex  align-items-center  justify-content-center  ">
        自然学习发，降低学习负担。认识26个字母即可正确发音。感谢韦式音标/感谢韦小红
    </div>

    <!--底部按钮-->
    <div v-cloak class="fixed-bottom row justify-content-center     ">
        <div class=" d-flex  col-md-6 col-sm-8   bg-warning glassbga  justify-content-around ">
            <button @click="er.emit('翻页',-1) " class="btn shadow-lg shadow btn-danger">上一个
                <span class="position-absolute badge badge-light badge-pill" v-text="pd.nameSize"> </span>
            </button>
            <label class="text-dark d-flex  align-items-center  ">页码 </label>
            <input @change="er.emit('翻页',0) " type="text" v-model="pd.page" class="w-25 form-control">
            <button ref="ref_login_manage" @click="er.emit('翻页',0) " class="btn shadow-lg btn-danger">删除
            </button>


            <button @click="er.emit('翻页',1) " class="btn shadow-lg shadow btn-danger">下一个
                <span class="position-absolute badge badge-light badge-pill" v-text="pd.nameSize"> </span>
            </button>

        </div>

    </div>

    <!---info提示信息--->
    <transition v-cloak mode="out-in" enter-active-class="animated pulse" leave-active-class="animated bounceOutRight">
        <div class=" container-sm  fixed-top    " style="z-index: 1083 ;" v-for="site in pd.info_list">
            <div class="alert  alert-warning alert-dismissible fade show" role="alert">
                <strong>{{site.type}}</strong>{{ site.info }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </transition>
    <!---遮罩1024--->
    <div v-cloak v-if="pd.sp==0?false:true" @click="er.emit('遮罩',0) " style="z-index: 1081  ;"
        class=" modal-backdrop show ">

    </div>
    <!---载入动画--->
    <transition v-cloak leave-active-class="animated fadeOut">
        <div v-if="pd.sp==0?false:true"
            class="center w-100 mt-5   row d-flex     align-items-center  justify-content-center  "
            style="z-index: 1082  ;">
            <div class="spinner-border   "></div>
        </div>
    </transition>
    <!---进度条---->
    <transition v-cloak>
        <div v-if="pd.vprogress>98?false:true" class="center w-100   px-3   " style="z-index: 1082 ; ">
            <div class="progress">
                <div class=" progress-bar  progress-bar-striped progress-bar-animated  "
                    v-bind:style="{ width: pd.vprogress+'%' , }">{{pd.vprogress}}%</div>
            </div>
        </div>

    </transition>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.47/vue.global.prod.min.js"></script>
    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.2/lodash.min.js"></script--->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.2.8/EventEmitter.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/umd/popper.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>


    <script>

        const ailist = [{
            'LocalName': 'Jenny',
            'ShortName': 'en-US-JennyNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Jenny Multilingual',
            'ShortName': 'en-US-JennyMultilingualNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Guy',
            'ShortName': 'en-US-GuyNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Aria',
            'ShortName': 'en-US-AriaNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Davis',
            'ShortName': 'en-US-DavisNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Amber',
            'ShortName': 'en-US-AmberNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Ana',
            'ShortName': 'en-US-AnaNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Ashley',
            'ShortName': 'en-US-AshleyNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Brandon',
            'ShortName': 'en-US-BrandonNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Christopher',
            'ShortName': 'en-US-ChristopherNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Cora',
            'ShortName': 'en-US-CoraNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Elizabeth',
            'ShortName': 'en-US-ElizabethNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Eric',
            'ShortName': 'en-US-EricNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Jacob',
            'ShortName': 'en-US-JacobNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Jane',
            'ShortName': 'en-US-JaneNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Jason',
            'ShortName': 'en-US-JasonNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Michelle',
            'ShortName': 'en-US-MichelleNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Monica',
            'ShortName': 'en-US-MonicaNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Nancy',
            'ShortName': 'en-US-NancyNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Roger',
            'ShortName': 'en-US-RogerNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Sara',
            'ShortName': 'en-US-SaraNeural',
            'Gender': 'Female',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Steffan',
            'ShortName': 'en-US-SteffanNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': 'Tony',
            'ShortName': 'en-US-TonyNeural',
            'Gender': 'Male',
            'Locale': 'en-US'
        },
        {
            'LocalName': '晓晓',
            'ShortName': 'zh-CN-XiaoxiaoNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '云希',
            'ShortName': 'zh-CN-YunxiNeural',
            'Gender': 'Male',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '云健',
            'ShortName': 'zh-CN-YunjianNeural',
            'Gender': 'Male',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓伊',
            'ShortName': 'zh-CN-XiaoyiNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '云扬',
            'ShortName': 'zh-CN-YunyangNeural',
            'Gender': 'Male',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓辰',
            'ShortName': 'zh-CN-XiaochenNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓涵',
            'ShortName': 'zh-CN-XiaohanNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓梦',
            'ShortName': 'zh-CN-XiaomengNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓墨',
            'ShortName': 'zh-CN-XiaomoNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓秋',
            'ShortName': 'zh-CN-XiaoqiuNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓睿',
            'ShortName': 'zh-CN-XiaoruiNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓双',
            'ShortName': 'zh-CN-XiaoshuangNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓萱',
            'ShortName': 'zh-CN-XiaoxuanNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓颜',
            'ShortName': 'zh-CN-XiaoyanNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓悠',
            'ShortName': 'zh-CN-XiaoyouNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '晓甄',
            'ShortName': 'zh-CN-XiaozhenNeural',
            'Gender': 'Female',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '云枫',
            'ShortName': 'zh-CN-YunfengNeural',
            'Gender': 'Male',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '云皓',
            'ShortName': 'zh-CN-YunhaoNeural',
            'Gender': 'Male',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '云夏',
            'ShortName': 'zh-CN-YunxiaNeural',
            'Gender': 'Male',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '云野',
            'ShortName': 'zh-CN-YunyeNeural',
            'Gender': 'Male',
            'Locale': 'zh-CN'
        },
        {
            'LocalName': '云泽',
            'ShortName': 'zh-CN-YunzeNeural',
            'Gender': 'Male',
            'Locale': 'zh-CN'
        }];

    </script>


    <script>
        const er = new EventEmitter //事件线
        const { onMounted, emits, createApp, ref, watch, computed } = Vue

        const gd = {};//全局数据 解决调用引用问题
        gd.storage = {
            //本地浏览器 存取组件
            set(key, value,area) {
                key = area ? area+':'+key : key ;//分区域分区组
                localStorage.setItem(key, JSON.stringify(value));
            },
            get(key,area) {
                key = area ? area+':'+key : key ;//分区域分区组
                return JSON.parse(localStorage.getItem(key));
            },
            remove(key,area) {
                key = area ? area+':'+key : key ;//分区域分区组
                localStorage.removeItem(key);
            },
        }
        gd.pd = ref({ "load": [] });;//page data 页面元素引用"数据"
        //const pd = ref({ "load": [] }); //特殊变量，页面数据
        const pvs = gd.pd.value; //变量代理访问
        class pgui {
            /* 界面控制类 初始化界面默认值 */
            constructor(arg) {
                //初始（值）

                //--界面值
                pvs.load.unshift('pgui')//从开头添加一个值
                pvs.sp = 0; //遮罩路由 (0.无，1.名单，2.登入 ,3.管理)
                pvs.row = {};//单词数据的一行



                pvs.page = gd.storage.get('page') ? gd.storage.get('page') : 0;//当前页码
                pvs.info_list = []//交互提示 {info:"2",type:"2"}
                pvs.vprogress = 100 //进度条
                //--发音选择
                pvs.mknew = { "gender": "女", "genderCode": "Female", "lang": "英", "langCode": "en-US" }
                pvs.selectList = ailist //发音人选项列表


                //--存储默认值
                pvs.shwoChange = gd.storage.get('shwoChange') ? gd.storage.get('shwoChange') : 1;//设置显示
                pvs.defTable = gd.storage.get('defTable') ? gd.storage.get('defTable') : '单个词表';//'默认表'
                pvs.defPath = gd.storage.get('defPath') ? gd.storage.get('defPath') : 'en500word';//'默认路径'
                pvs.defFrom = gd.storage.get('defFrom') ? gd.storage.get('defFrom') : '';// 条件。单词来源

                //初始效果
                this.hd = { //请求头
                    mode: 'cors',
                    cache: 'no-cache',
                    "headers": {
                        'Content-Type': 'application/json'
                    }
                }
                this.init();
            }

            init() {
                //初始（设置）
                //绑定事件
                er.on("读取.单词", this.toGet)
                er.on('收到.单词', this.toGeted)
                er.on('遮罩', this.spto)
                er.on('播放', this.play)

                er.on('翻页', this.nextPage)
                //er.on('修改', this.toChange)
                er.on('更新', this.toUpdate)
                er.on('更新.发音人', this.toUpdated)
                er.on('生成.发音', this.toMake) //计算时间先不做
                er.on('生成.图片', this.toMakeImg)
                er.on('设置', this.toSetDef)

                er.on('获取音标', this.toGetPh) //获取音标

            }
            toGetPh() {

                const that = gd.oui
                //获取数据，发送请求
                var url = "http://127.0.0.1:2028/eng/getph";

                var data = {};
                data['en'] = pvs.row.en
                // //发送
                //return
                axios.post(url, data, that.hd)
                    .then(
                        dat => {
                            that.loginLoading(0)
                            that.spto(0)
                            if (dat.data['@code'] < 300) {
                                that.showInfo(dat.data['@msg'], '获取音标：')
                                pvs.row.ph = dat.data.data[pvs.row.en][0]
                            } else {
                                that.showInfo('出现错误', '获取音标：')
                                console.log('ph==', dat.data.data[pvs.row.en][0], dat.data)
                            }
                        }
                    )
                    .catch(that.getErr)

                // fetch(url, opt)
                //     .then(res => res.json())
                //     .catch(that.getErr)
                //     .then(dat => er.emit('更新.发音人完成', dat))
                //     ;
                //动画效果
                that.loginLoading(1)
                that.spto(1) //loading 


            }
            toSetDef(dc) {
                const that = gd.oui
                // 设置 读取 表和路径
                gd.storage.set('shwoChange', pvs.shwoChange);
                gd.storage.set('defTable', pvs.defTable);//默认表
                gd.storage.set('defPath', pvs.defPath);//默认表
                gd.storage.set('defFrom', pvs.defFrom);//默认查询条件
                that.showInfo('设置成功', '表和路径：')
                setTimeout(function () { that.nextPage(0); }, 1000);

            }
            nextPage(n) {
                //跳转、翻页
                const that = gd.oui
                //pvs.page = gd.storage.get ('page')
                pvs.page = parseInt(pvs.page) + n;
                if (pvs.page <= 0) { pvs.page = 0 }
                gd.storage.set('page', pvs.page)
                console.log("page=", pvs.page)
                that.toGet(1)
            }
            play(n) {
                //播
                console.log('播放=', n)
                //播放指定 document.querySelectorAll('audio')[0].play()
                document.querySelectorAll('audio')[n].play()

            }
            // toChange(dc) {
            //     // 设置 修改选择框 男女、中英

            //     pvs.mknew = Object.assign({}, pvs.mknew, dc);
            // }
            toMakeImg() {
                // 设置 修改选择框 男女、中英
                const that = gd.oui
                var url = "http://127.0.0.1:2028/eng/mkimg";
                var data = {};
                data['zh'] = pvs.row.zh  //发音
                data['en'] = pvs.row.en  //发音
                data['ph'] = pvs.row.ph //音标
                data['dir'] = pvs.defPath //首目录

                console.log(url, data)
                //发送
                //return
                axios.post(url, data, that.hd)
                    .then(
                        dat => {
                            that.showInfo(dat.data['@msg'], '创建图片：')
                            that.loginLoading(0)
                            that.spto(0)
                            setTimeout(function () { location.reload(true); }, 1000);
                        }
                    )
                    .catch(that.getErr)
                //动画效果
                that.loginLoading(1)
                that.spto(1) //loading 

            }
            toUpdate(dc) {
                // 设置 修改选择框 男女、中英
                const that = gd.oui
                //获取数据，发送请求
                var url = "http://127.0.0.1:2028/jsonapi/put";
                //url = "http://127.0.0.1:2028/jsonapi";
                var query = { "id": pvs.row.id }
                var setdat = {}


                setdat['s4en4f'] = pvs.row.s4en4f  //发音
                setdat['s4en4m'] = pvs.row.s4en4m  //发音
                setdat['s4zh4f'] = pvs.row.s4zh4f  //发音
                setdat['s4zh4m'] = pvs.row.s4zh4m //发音

                setdat['ph'] = pvs.row.ph //音标

               
                var data = {}; //请求数据
                data[pvs.defTable] = query //表
                query['@update'] = setdat //设置值
                console.log(url, data)
                //发送
                //return
                axios.post(url, data, that.hd)
                    .then(dat => er.emit('更新.发音人', dat))
                    .catch(that.getErr)
                //动画效果
                that.loginLoading(1)
                that.spto(1) //loading 
            }

            toMake(dc) {
                // 设置 修改选择框 男女、中英
                const that = gd.oui
                //获取数据，发送请求
                var url = "http://127.0.0.1:2028/eng/make";
                var data = dc;
                data['zh'] = pvs.row.zh
                data['en'] = pvs.row.en
                data['dir'] = pvs.defPath
                console.log(data)
                // //发送
                //return
                axios.post(url, data, that.hd)
                    .then(
                        dat => {
                            that.showInfo(dat.data['@msg'], '创建声音：')
                            that.loginLoading(0)
                            that.spto(0)

                            setTimeout(function () { location.reload(true); }, 1000);
                        }
                    )
                    .catch(that.getErr)
                //动画效果
                that.loginLoading(1)
                that.spto(1) //loading 
            }


            toGet(e) {
                const that = gd.oui
                //获取数据单词
                var url = "http://127.0.0.1:2028/jsonapi/get";
                //url = "http://127.0.0.1:2028/jsonapi";
                var ja = {}

                ja['@limit'] = 1
                ja['@page'] = pvs.page
                ja['mkimg'] = 1 //是否显示
                if (pvs.defFrom) { ja['f'] = pvs.defFrom } //来源条件
                //发送
                var data = {};
                data[pvs.defTable] = ja
                axios.post(url, data, that.hd)
                    //fetch(url, opt)
                    //.then(res => res.json())
                    .catch(that.getErr)
                    .then(dat => er.emit('收到.单词', dat))
                    ;
                //动画效果
                that.loginLoading(1)
                that.spto(1) //loading 
            }
            loginLoading(n) {
                //登入中效果
                pvs.loginLoding = n
            }
            spto(n) {
                //遮罩和二级界面
                /*切换界面*/
                pvs.sp = n
            }

            progress(n) {
                const that = gd.oui
                //进度  0 和 100 都隐藏
                console.log("进度", n)
                pvs.vprogress = pvs.vprogress + n
                if (pvs.vprogress > 98) {
                    that.spto(0)
                    that.loginLoading(0)
                }
            }
            showInfo(info, type = '') {
                //结果提示信息 （数据驱动）
                //添加数据，来添加提示
                pvs.info_list.push({ "info": info, "type": type })
                //缺少动效
                setTimeout(function () { pvs.info_list.splice(0, 1); }, 4000);
            }
            getErr(error) {
                //登入错误处理
                const that = gd.oui
                console.log('Error:', error);
                that.loginLoading(0) //loading 
                that.spto(0) //loading  
                that.showInfo('无法加载到数据，刷新重试', '载入数据：') //loading  
            }
            toGeted(dat) {
                // 读取数据到 json/翻页    页面
                const that = gd.oui
                console.log('请求返回数据', dat.data);

                //词展示++++
                that.loginLoading(0) //loading 
                that.spto(0) //loading 
                if (typeof (dat.data) == "undefined" || dat.data['@code'] > 200 ) {
                    that.showInfo(" 无数据 ", "读取单词"+pvs.page+"页")
                    return
                } //没数据

                //设置数据
                console.log(dat.data[pvs.defTable][0])
                var noCache = new Date().valueOf();//禁止缓存
                pvs.row = dat.data[pvs.defTable][0]
                //pvs.row.img = '/en500word/h/e/健康.png' //  /en500word/h/e/健康.png
                pvs.row.img = `/${pvs.defPath}/${pvs.row.en.substring(0, 1)}/${pvs.row.en.substring(1, 2)}/${pvs.row.zh}.png?q=${noCache}` //  /en500word/h/e/健康.png
                //设置 mp3
                pvs.row.zh4m = `/${pvs.defPath}/${pvs.row.en.substring(0, 1).toLowerCase()}/${pvs.row.en.substring(1, 2).toLowerCase()}/${pvs.row.zh}_zh4m.mp3?q=${noCache}` //   
                pvs.row.en4m = `/${pvs.defPath}/${pvs.row.en.substring(0, 1).toLowerCase()}/${pvs.row.en.substring(1, 2).toLowerCase()}/${pvs.row.zh}_en4m.mp3?q=${noCache}` //  
                pvs.row.zh4f = `/${pvs.defPath}/${pvs.row.en.substring(0, 1).toLowerCase()}/${pvs.row.en.substring(1, 2).toLowerCase()}/${pvs.row.zh}_zh4f.mp3?q=${noCache}` //  没下划线
                pvs.row.en4f = `/${pvs.defPath}/${pvs.row.en.substring(0, 1).toLowerCase()}/${pvs.row.en.substring(1, 2).toLowerCase()}/${pvs.row.zh}_en4f.mp3?q=${noCache}` //  没下划线
            }

            toUpdated(dat) {
                //更新后
                const that = gd.oui
                console.log('请求返回数据', dat);
                //词展示++++
                that.loginLoading(0) //loading 
                that.spto(0) //loading 
                that.showInfo(dat.data['@msg'], '更新音标：') //loading  
                //setTimeout(function () { that.toGet(0); }, 500);  //更新数据
                that.toGet(0);

            }
            watchPg(newValue, oldValue) {
                //watch
                console.log('gd pagedata 被修改')
                //console.log('gd pagedata 被修改\n', newValue, '\n', oldValue)
            }
            showOp(lang, gen) {
                console.log('  ini showOp   ', lang, gen)
                //重计算
                lang = lang ? lang : pvs.mknew.langCode
                gen = gen ? gen : pvs.mknew.genderCode
                console.log(' set showOp   ', lang, gen)
                const ls = [];
                for (var i in pvs.selectList) {
                    if (pvs.selectList[i].Locale == lang && pvs.selectList[i].Gender == gen) {
                        ls.push(pvs.selectList[i]);
                    }
                }
                //console.log(" showOp list length== ",ls.length ,ls)
                return ls //pvs.mknew.lang;
            }
        }

        //----------开始
        let appdat = {
            setup() {
                const oui = new pgui(); //界面更改"方法"
                //const ocls = new cls(12);//默认选择
                //---放入全局解决this问题
                //gd.ocls = ocls; //抽奖类
                //gd.oin = oin; //通信逻辑
                gd.oui = oui; //ui界面

                watch(gd.pd, oui.watchPg, { deep: true });
                //pvs.opList = computed(() => oui.showOp('', '')); //二次计算pvs.opList
                //------
                pvs.opFzh = computed(() => oui.showOp('zh-CN', 'Female')); //二次计算 
                pvs.opFen = computed(() => oui.showOp('en-US', 'Female')); //二次计算 
                pvs.opMzh = computed(() => oui.showOp('zh-CN', 'Male')); //二次计算 
                pvs.opMen = computed(() => oui.showOp('en-US', 'Male')); //二次计算 
                //onMounted(() => ocls.bindEvt()); //窗口大小变动事件
                //onMounted(() => oui.remount()); //已经登入刷新处理
                onMounted(() => oui.nextPage(0)); //已经登入刷新处理
                //--变量关联到html的映射 js访问要加.value
                return { er, oui, "pd": gd.pd, "ref_login_manage": gd.pd.refManageEmt, }
            }
        }
        const app = createApp(appdat)
        //app.use(Quasar) //vue的ui
        app.mount('#q-app')
    </script>

 

</body>

</html>